<template>
  <div class="layout">
    <div class="layout-header">
      <slot name="header" />
    </div>
    <div class="layout-wrap">
      <div class="layout-sider">
        <slot name="sider" />
      </div>
      <div class="layout-content">
        <slot name="breadcrumb" />
        <div class="layout-main">
          <slot name="main" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Layout"
};
</script>

<style scoped lang="scss">
@import "@/assets/common/css/__flex.scss";
@import "@/assets/common/css/__color.scss";

.layout {
  @include flex-box();
  @include flex-item();
  @include flex-box--dir(top);
  height: 100%;
  background: $bgColor;
  overflow: hidden;
  &-wrap {
    @include flex-box--dir(left);
    @include flex-box();
    @include flex-item();
    overflow: auto;
  }
  &-sider {
    background: #fff;
    border-right: 1px $borderColor solid;
  }
  &-content {
    @include flex-item();
    overflow: auto;
  }
  &-main {
    margin: 0 30px 30px 30px;
    padding: 20px;
    background: #fff;
    border-radius: 6px;
    border: 1px $borderColor solid;
  }
}
</style>